<template>
  <div class="vip">
    <h3 class="title">卡类型管理</h3>
    <div class="toolbar">
      <el-button type="danger" size="small" icon="el-icon-plus" @click="$router.push('add')">添加</el-button>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager">
      <template slot="image" slot-scope="{ row }">
        <el-image :src="row.image" />
      </template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { VipActionsEnum } from '../../../_/vue/store/vip'
import table from '../../../mixins/table'
export default {
  mixins: [table],
  data () {
    return {
      tableOptions: [
        { attrs: { label: 'ID', prop: 'id', width: '80px', align: 'center' } },
        { attrs: { label: '名称', prop: 'title' } },
        { attrs: { label: '背景图', prop: 'image', width: '120px' } },
        { attrs: { label: '描述', prop: 'description' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '120px', align: 'center' },
          buttons: [
            {
              label: '编辑',
              type: 'primary',
              icon: 'el-icon-edit',
              click: ({ row }) => {
                this.$router.push({ path: 'add', query: { id: row.id } })
              }
            },
            {
              label: '删除',
              type: 'popover',
              icon: 'el-icon-delete',
              click: ({ row }) => {
                this.delete({ ids: [row.id] })
                this.$message.success('删除成功')
                this.getData()
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: VipActionsEnum.LIST,
      delete: VipActionsEnum.DELETE
    })
  }
}
</script>
